<template>
  <div class="IntervalShow">
    <div class="filter">
      <el-form ref="form" label-width="90px">
        <div class="operation">
          <el-form-item label="间隔查询:">
            <el-input v-model="searchText" class="yd-input" maxlength="15"></el-input>
          </el-form-item>
          <el-button class="but-query" type="text" size="medium" @click="searchInterval()">
            <i class="query-icon"></i>查询
          </el-button>
        </div>
      </el-form>
    </div>
    <div class="content">
      <div class="content-left">
        <ul>
          <li
            class="left-item"
            :class="item.id == checkArea.id ? 'is-checked' : '' "
            v-for="item in devicesAreas"
            :key="item.id"
            @click="leftItemOnClick(item)"
          >{{item.name}}</li>
        </ul>
      </div>
      <div class="content-right">
        <div class="right-data">
          <ul>
            <li
              class="right-item"
              :style="returnColorWithMatchArray(item.alarmLevel, alarmLevel)"
              v-for="item in areasIntervals"
              :key="item.id"
              @click="rightItemOnClick(item)"
            >{{item.name}}</li>
          </ul>
        </div>
      </div>
    </div>
    <el-dialog
      class="dialog-alarm"
      :title="checkArea.name + '-' + checkInterval.name + '间隔告警一览'"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
    >
      <ul>
        <li class="dialog-item" v-for="item in intervalDevices" :key="item.id">
          <span class="dot" :style="returnColorWithMatchArray(item.alarmLevel, alarmLevel)"></span>
          <span class="dialog-item-title">{{item.name}}</span>
          <!-- {{item.name}} -->
        </li>
      </ul>
    </el-dialog>
  </div>
</template>
<script>
import {
  devicesAreas,
  devicesAreaIntervals,
  areasIntervalDevices
} from "@/api/apiManagement";
import { matchArrayContent, AlarmLevel } from "@/utils/constant";

export default {
  data() {
    return {
      robot_id: null,
      searchText: "",
      devicesAreas: [],
      checkArea: {},
      areasIntervals: [],
      intervalDevices: [],
      checkInterval: {},
      dialogVisible: false,
      alarmLevel: AlarmLevel
    };
  },
  created() {
    this.robot_id = localStorage.getItem("ydRobot_id");
    // 设备区域
    this.alerm_GetDevicesAreas();
  },
  mounted() {},
  methods: {
    alerm_GetDevicesAreas() {
      devicesAreas()
        .then(response => {
          if (response) {
            this.devicesAreas = response;
            if (this.devicesAreas.length > 0) {
              this.checkArea = this.devicesAreas[0];
              this.alerm_GetAreasIntervals({ deviceAreaId: this.checkArea.id });
            }
          }
        })
        .catch(() => {});
    },
    alerm_GetAreasIntervals(parm) {
      devicesAreaIntervals(parm)
        .then(response => {
          if (response) {
            this.areasIntervals = response;
          }
        })
        .catch(() => {});
    },
    alerm_GetIntervalDevices(parm) {
      areasIntervalDevices(parm)
        .then(response => {
          if (response) {
            console.log("***************", response)
            this.intervalDevices = response;
            if (this.intervalDevices.length > 0) {
              this.dialogVisible = true;
            }
          }
        })
        .catch(() => {});
    },

    searchInterval() {
      this.alerm_GetAreasIntervals({
        deviceAreaId: this.checkArea.id,
        intervalName: this.searchText
      });
    },
    leftItemOnClick(val) {
      this.checkArea = val;
      this.alerm_GetAreasIntervals({ deviceAreaId: this.checkArea.id });
    },
    rightItemOnClick(val) {
      this.checkInterval = val;
      this.alerm_GetIntervalDevices({ intervalId: val.id });
    },

    handleClose(done) {
      this.dialogHandleCloase();
      done();
    },
    dialogHandleConfirm() {
      this.dialogHandleCloase();
    },
    dialogHandleCloase() {
      this.dialogVisible = false;
    },
    // 匹配类型返回
    returnColorWithMatchArray(val, array) {
      for (let i = 0; i < array.length; i++) {
        if (val === array[i].value) {
          return "background-color: " + array[i].color;
        }
      }
      return "background-color: #FFF";
    }
  }
};
</script>

<style>
.IntervalShow .filter .el-form-item {
  margin-top: 0;
  margin-bottom: 3px;
}
.IntervalShow .filter .el-form-item__label {
  font-size: 13px;
  line-height: 26px;
}
.IntervalShow .filter .el-form-item__content {
  font-size: 13px;
  line-height: 26px;
}
.IntervalShow .filter .el-checkbox {
  font-size: 13px;
}
.IntervalShow .filter .el-checkbox__label {
  font-size: 13px;
}
.IntervalShow .filter .el-checkbox {
  width: 100px;
  margin-left: 10px;
}
.IntervalShow .filter .el-checkbox + .el-checkbox {
  margin-left: 10px;
}
/*  */

.IntervalShow {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
}
.IntervalShow .filter {
  position: relative;
  width: 100%;
  /* height: 65px; */
  background-color: #eeeeee;
}
.IntervalShow .operation {
  width: 100%;
  height: 30px;
  background: linear-gradient(
    rgb(227, 242, 238),
    rgb(202, 231, 238)
  ); /* 标准的语法 */
  border-top: 1px solid rgb(202, 231, 238);
}

.IntervalShow .operation .el-form-item {
  margin-top: 1px;
  margin-bottom: 0;
  float: left;
}
.IntervalShow .operation .el-form-item__content {
  width: 200px;
  margin-left: 5px !important;
}
.IntervalShow .operation .el-form-item__content {
  /* width: 200px; */
  margin-left: 5px !important;
  line-height: 26px;
  float: left;
}
.IntervalShow .operation .el-date-editor.el-input {
  width: 200px;
}
.IntervalShow .operation .el-input__inner {
  height: 26px;
  line-height: 26px;
}
.IntervalShow .operation .el-input__icon {
  line-height: 26px;
}
.IntervalShow .but-query {
  height: 30px;
  margin-left: 20px;
  margin-right: 10px;
  padding: 0;
  font-size: 13px;
  color: #000;
  float: left;
}
.IntervalShow .query-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  background-image: url(../../../static/resources/images/query.png);
  background-size: 100% 100%;
  float: left;
}

.IntervalShow .content {
  position: relative;
  width: 100%;
  flex-grow: 1;
  background-color: #ffffff;
}
.IntervalShow .content-left {
  position: relative;
  width: 300px;
  height: 100%;
  background-color: #fff;
  border: 1px solid rgb(202, 231, 238);
  float: left;
}
.IntervalShow .content-right {
  position: relative;
  /* width: 100%; */
  width: calc(100% - 300px);
  height: 100%;
  /* margin-left: 300px; */
  /* padding: 0 0 0 10px; */
  border: 1px solid rgb(202, 231, 238);
  float: left;
}

.IntervalShow .content ul,
.IntervalShow .content li,
.IntervalShow .dialog-alarm ul,
.IntervalShow .dialog-alarm li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.IntervalShow .content-left li {
  margin: 10px auto;
}
.IntervalShow .content-right li {
  margin: 6px;
}
.IntervalShow .left-item {
  width: 260px;
  height: 80px;
  margin: 10px auto;
  background-color: #d2e9e5;
  text-align: center;
  font-size: 18px;
  line-height: 80px;
  border-radius: 5px;
}
.IntervalShow .is-checked {
  background-color: #cdc0e5;
}
.IntervalShow .right-data {
  margin: 10px;
  padding: 3px;
  background-color: #d2e9e5;
}
.IntervalShow .right-item {
  /* width: 200px; */
  height: 30px;
  min-width: 160px;
  margin: 6px;
  display: inline-block;
  background-color: #78ee88;
  text-align: center;
  font-size: 15px;
  line-height: 30px;
  border-radius: 5px;
  box-shadow: 0px 0px 3px 1px rgba(48, 53, 54, 0.3);
}
.IntervalShow .el-dialog {
  background-color: rgb(215, 239, 236);
  width: 65%;
  min-width: 480px;
  padding-bottom: 2px;
}
.IntervalShow .dialog-alarm .el-dialog__header {
  padding: 0px 5px;
}
.IntervalShow .dialog-alarm .el-dialog__header .el-dialog__title {
  font-size: 13px;
}
.IntervalShow .dialog-alarm .el-dialog__headerbtn {
  top: 3px;
  right: 10px;
}
.IntervalShow .el-dialog__body {
  overflow: auto;
  border: 1px solid #90e8c6;
  background-color: white;
  padding: 10px;
  margin: 0px 5px 5px;
}
.IntervalShow .dialog-alarm .dialog-item {
  border: 1px solid black;
  width: 25%;
  float: left;
  text-align: center;
  height: 36px;
  line-height: 30px;
}
.IntervalShow .dialog-alarm .dialog-item .dialog-item-title {
  height: 100%;
  vertical-align: middle;
  margin-left: 5px;
}
.IntervalShow .dialog-item .dot {
  height: 16px;
  width: 16px;
  border-radius: 8px;
  display: inline-block;
  vertical-align: middle;
}
</style>